<template>
  <div class="container">
    <div class="showCont" v-if="!showTimeOut && showCont">
      <div class="stepTitle">
        <div class="stepName">
          {{ detailInfo.project_name }}{{ detailInfo.project_name }}
        </div>
        <div class="moneyNum">
          ¥{{ $converData.setMoney(detailInfo.project_budget) }}
        </div>
      </div>
      <div class="itemForm">
        <div class="statusImg">
          <img
            v-if="detailInfo.examine_status == 1"
            src="/img/statusPend.png"
          />
          <img v-if="detailInfo.examine_status == 2" src="/img/statusBid.png" />
          <img
            v-if="detailInfo.examine_status == 3"
            src="/img/statusNopass.png"
          />
          <img
            v-if="detailInfo.examine_status == 4"
            src="/img/statusStart.png"
          />
          <img
            v-if="detailInfo.examine_status == 5"
            src="/img/statusOver.png"
          />
          <img v-if="detailInfo.examine_status == 6" src="/img/statusEnd.png" />
        </div>
        <div class="formItem">
          <div class="itemName">经验要求</div>
          <div class="itemVal">{{ detailInfo.jdjy }}年以上</div>
        </div>
        <div class="formItem">
          <div class="itemName">周期要求</div>
          <div class="itemVal">{{ detailInfo.project_cycle }}个月</div>
        </div>
        <div class="formItem">
          <div class="itemName">办公要求</div>
          <div class="itemVal">{{ detailInfo.bgyq }}</div>
        </div>
        <div class="formItem">
          <div class="itemName">接单群体</div>
          <div class="itemVal">{{ detailInfo.jdqt }}</div>
        </div>
        <div class="formItem">
          <div class="itemName">截止日期</div>
          <div class="itemVal">{{ detailInfo.end_time }}</div>
        </div>
      </div>
      <div class="stepTitle hasTop">
        <div class="stepName">需求说明</div>
      </div>
      <div class="formMain">
        <div class="orderNum">
          项目编号【{{ detailInfo.project_demand_number }}】
        </div>
        <div class="orderInfo" style="white-space: pre-wrap">
          {{ $converData.changeLine(detailInfo.project_describe) }}
        </div>
      </div>
      <div class="stepTitle hasTop" v-if="detailInfo.bidder_info">
        <div class="stepName">中标者信息</div>
      </div>
      <div class="itemForm" v-if="detailInfo.bidder_info">
        <div class="formItem">
          <div class="itemName">投标时间</div>
          <div class="itemVal">{{ detailInfo.bidder_info.create_time }}</div>
        </div>
        <div class="formItem">
          <div class="itemName">中标时间</div>
          <div class="itemVal">{{ detailInfo.bidder_info.bidder_time }}</div>
        </div>
        <div class="formItem">
          <div class="itemName">完成时间</div>
          <div class="itemVal">
            {{
              detailInfo.bidder_info.complete_time == 0
                ? "- -"
                : detailInfo.bidder_info.complete_time
            }}
          </div>
        </div>
        <div class="userCont">
          <div class="userImg">
            <img :src="detailInfo.bidder_info.head_img" />
          </div>
          <div class="userName">{{ detailInfo.bidder_info.nick_name }}</div>
          <div class="userBook" @click="detaiFn(detailInfo.bidder_info)">
            主页详情
          </div>
        </div>
      </div>
      <div
        class="stepTitle hasTop"
        v-if="detailInfo.bid_record && detailInfo.bid_record.length > 0"
      >
        <div class="stepName">
          竞标开发者({{ detailInfo.bid_record.length }})
        </div>
      </div>
      <div
        class="orderMain"
        v-if="detailInfo.bid_record && detailInfo.bid_record.length > 0"
      >
        <div
          @click="detaiFn(item)"
          :class="index == 0 ? 'orderItem noTop' : 'orderItem'"
          :key="index"
          v-for="(item, index) in detailInfo.bid_record"
        >
          <div class="typeTagWai" v-if="item.is_read == 1">
            <div class="typeTag">未读</div>
          </div>
          <!-- <div class="readTag" v-if="item.is_read == 1">未读</div> -->
          <div class="itemHead">
            <div class="userImg">
              <img :src="item.head_img" />
            </div>
            <div class="userNameCont">
              <div class="headName">
                <div class="orderNum">{{ item.career_path }}</div>
                <div class="orderTag">{{ item.work_experience }}</div>
              </div>
              <div class="userInfo">
                {{ item.work_address }} · {{ item.work_status }}
              </div>
            </div>
            <div class="headMoney">¥{{ item.salary_day }}/天</div>
          </div>
          <div class="orderForm">
            <div class="formItem">
              时间：
              <span :key="b" v-for="(a, b) in item.work_time">
                <span v-if="b > 0">，</span>
                {{ a.name + "(" + a.start_time + "~" + a.end_time + ")" }}</span
              >
            </div>
            <div class="formItem">
              技能：<span :key="b" v-for="(a, b) in item.skill">
                <span v-if="b > 0">、</span>
                {{ a.name }}</span
              >
            </div>
            <div class="formItem">
              作品：<span :key="b" v-for="(a, b) in item.works_case">
                <span v-if="b > 0">，</span>
                {{ a.works_name }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="stepTitle hasTop">
        <div class="stepName">温馨提示</div>
      </div>
      <div class="itemForm">
        <div class="tipCont">
          请认真<span class="blueText">了解需求</span
          >，确保能胜任需求项目，再点击<span class="blueText">申请接单</span>。
        </div>
        <div class="tipCont">
          中标后请负责<span class="blueText">认真完成项目</span
          >，否则会直接影响个人信誉。
        </div>
        <div class="tipCont">
          在沟通过程中，发现需求方有不当行为，请<span class="blueText"
            >联系客服</span
          >处理。
        </div>
      </div>
      <div class="ctrlBtn" v-if="typeInfo.type == 2">
        <div class="homeBtn iconfont icon-fanhui" @click="backFn"></div>
        <div class="addBtn" @click="modulesCtrlFn">{{ typeInfo.btnName }}</div>
      </div>
      <div class="subBtn" v-if="typeInfo.type == 1" @click="backFn">返回</div>
    </div>
    <van-popup v-model:show="showbidder" round position="bottom">
      <div class="maskCont">
        <div class="maskHead">竞标者列表</div>
        <div class="orderMain maskUser">
          <div
            @click="activeBidId = item.user_id"
            :class="
              activeBidId == item.user_id ? 'orderItem activeItem' : 'orderItem'
            "
            :key="index"
            v-for="(item, index) in detailInfo.bid_record"
          >
            <div class="itemHead">
              <div class="userImg">
                <img :src="item.head_img" />
              </div>
              <div class="userNameCont">
                <div class="headName">
                  <div class="orderNum">{{ item.career_path }}</div>
                  <div class="orderTag">{{ item.work_experience }}</div>
                </div>
                <div class="userInfo">
                  {{ item.work_address }} · {{ item.work_status }}
                </div>
              </div>
              <div class="headMoney">¥{{ item.salary_day }}/天</div>
            </div>
            <div class="orderForm">
              <div class="formItem">
                时间：
                <span :key="b" v-for="(a, b) in item.work_time">
                  <span v-if="b > 0">，</span>
                  {{
                    a.name + "(" + a.start_time + "~" + a.end_time + ")"
                  }}</span
                >
              </div>
              <div class="formItem">
                技能：<span :key="b" v-for="(a, b) in item.skill">
                  <span v-if="b > 0">、</span>
                  {{ a.name }}</span
                >
              </div>
              <div class="formItem">
                作品：<span :key="b" v-for="(a, b) in item.works_case">
                  <span v-if="b > 0">，</span>
                  {{ a.works_name }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div
          @click="sureBidFn"
          :class="activeBidId > -1 ? 'sureBidderBtn' : 'sureBidderBtn disBtn'"
        >
          {{ activeBidId > -1 ? "确定竞标者" : "请选择中标者" }}
        </div>
      </div>
    </van-popup>
    <subLoad v-if="showSub"></subLoad>
    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>
<script>
import { orderDetail, bidderCheck, checkAccept } from "@/http/api";
import { showSuccessToast, showToast, showConfirmDialog } from "vant";
import subLoad from "@/components/public/subLoad.vue";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
export default {
  components: { subLoad, load, getTimeOut },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      showSub: false,
      showbidder: false,
      homeData: {},
      navArr: [
        { name: "全部", id: 0 },
        { name: "未读", id: 1 },
        { name: "已读", id: 2 },
      ],
      openCheck: false,
      navId: 0,
      detailInfo: {},
      activeBidId: -1,
      typeInfo: {},
    };
  },
  props: {},
  setup() {},
  methods: {
    modulesCtrlFn() {
      if (this.typeInfo.ctrType == "cancel") {
        this.cancelFn();
      } else if (this.typeInfo.ctrType == "bid") {
        this.showbidder = true;
      } else if (this.typeInfo.ctrType == "edit") {
        this.editFn();
      } else if (this.typeInfo.ctrType == "over") {
        this.overFn();
      }
    },
    cancelFn() {
      showConfirmDialog({
        title: "取消提示",
        message: "确定取消此需求发布吗?点击确认之后此需求状态将转为已取消。",
      })
        .then(() => {
          if (!this.showSub) {
            let data = {
              project_demand_id: this.$route.query.id,
            };
            this.showSub = true;
            checkAccept(data)
              .then((res) => {
                if (res.data.code == 1) {
                  showSuccessToast("取消成功");
                  this.getData();
                } else {
                  showToast(res.data.msg);
                }
                this.showSub = false;
              })
              .catch(() => {
                this.showSub = false;
              });
          }
        })
        .catch(() => {});
    },
    overFn() {
      showConfirmDialog({
        title: "验收提示",
        message: "确定验收此需求吗?点击确认之后此需求状态将转为已完成。",
      })
        .then(() => {
          if (!this.showSub) {
            let data = {
              project_demand_id: this.$route.query.id,
            };
            this.showSub = true;
            checkAccept(data)
              .then((res) => {
                if (res.data.code == 1) {
                  showSuccessToast("验收成功");
                  this.getData();
                } else {
                  showToast(res.data.msg);
                }
                this.showSub = false;
              })
              .catch(() => {
                this.showSub = false;
              });
          }
        })
        .catch(() => {});
    },
    editFn() {
      this.$router.push({ path: "/send", query: { id: this.$route.query.id } });
    },
    backFn() {
      this.$router.back();
    },
    sureBidFn() {
      if (this.activeBidId > -1) {
        showConfirmDialog({
          title: "操作提示",
          message:
            "确定选择此开发者负责此需求项目研发吗？确认之后可查看此开发者联系方式。",
        })
          .then(() => {
            // on confirm
            if (!this.showSub) {
              let data = {
                user_id: this.activeBidId,
                project_demand_id: this.$route.query.id,
              };
              this.showSub = true;
              bidderCheck(data)
                .then((res) => {
                  if (res.data.code == 1) {
                    this.getData();
                    this.showbidder = false;
                    showConfirmDialog({
                      title: "操作提示",
                      message: "选标成功，联系中标者可进行项目开发合作。",
                    })
                      .then(() => {})
                      .catch(() => {});
                  } else {
                    showToast(res.data.msg);
                  }
                  this.showSub = false;
                })
                .catch(() => {
                  this.showSub = false;
                });
            }
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    navFn(item) {
      this.navId = item.id;
    },
    detaiFn(item) {
      this.$router.push({
        path: "/detail",
        query: {
          id: item.user_id,
          type: 2,
          project_demand_id: this.$route.query.id,
        },
      });
    },
    getData() {
      let data = {
        project_demand_id: this.$route.query.id,
      };
      orderDetail(data)
        .then((res) => {
          if (res.data.code == 1) {
            let status = res.data.data.examine_status;
            if (status == 1) {
              this.typeInfo = {
                type: 2,
                btnName: "取消发布",
                ctrType: "cancel",
              };
            } else if (status == 2) {
              if (res.data.data.bid_record.length == 0) {
                this.typeInfo = {
                  type: 1,
                  btnName: "",
                };
              } else {
                this.typeInfo = {
                  type: 2,
                  btnName: "项目选标",
                  ctrType: "bid",
                };
              }
            } else if (status == 3) {
              this.typeInfo = {
                type: 2,
                btnName: "重新编辑",
                ctrType: "edit",
              };
            } else if (status == 4) {
              this.typeInfo = {
                type: 2,
                btnName: "验收项目",
                ctrType: "over",
              };
            } else if (status == 5 || status == 6) {
              this.typeInfo = {
                type: 1,
                btnName: "",
              };
            }
            this.detailInfo = res.data.data;
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>

<style scoped lang="less">
.container {
  min-height: 100vh;
  background-color: #fff;
  .showCont {
    padding: 1.25rem 4% 4rem;
    box-sizing: border-box;
  }
  .stepTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .stepName {
      font-size: 0.8rem;
      font-weight: bold;
      margin-right: 0.75rem;
      width: 1rem;
      flex: 1;
    }
    .openBtn {
      color: #86a9fb;
      font-size: 0.65rem;
    }
    .moneyNum {
      color: #86a9fb;
      font-weight: normal;
      font-size: 0.8rem;
    }
  }
  .orderMain {
    width: 100%;
    margin-top: 0.5rem;
    max-height: 500px;
    overflow: auto;
    scrollbar-width: none;
    .orderItem {
      //   background-color: #f1f4fb;
      padding: 0.75rem;
      // border-top: 1px dashed #ccc;
      border: 1px solid #86a9fb;
      border-radius: 0.25rem;
      margin: 0 0 0.75rem;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      .typeTagWai {
        font-size: 0.6rem;
        height: 1.1rem;
        line-height: 1.3rem;
        position: absolute;
        top: 0.05rem;
        right: -1.9rem;
        background-color: #999;
        width: 5rem;
        text-align: center;
        transform: rotate(45deg);
        color: white;
        .typeTag {
          transform: scale(0.8);
        }
      }
      .readTag {
        position: absolute;
        padding: 0.1rem 0.5rem;
        right: 0;
        font-size: 0.6rem;
        color: #fff;
        border-radius: 0 0 0 0.25rem;
        top: 0;
        background-color: #c3d7fc;
      }
      .itemHead {
        // padding: 0rem 0 0.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .userImg {
          width: 2.3rem;
          height: 2.3rem;
          overflow: hidden;
          font-size: 0;
          border-radius: 50%;
          img {
            width: 100%;
          }
        }
        .userNameCont {
          flex: 1;
          width: 1rem;
          margin: 0 0.5rem;
          .headName {
            display: flex;
            align-items: center;
            .orderNum {
              font-weight: bold;
              font-size: 0.7rem;
            }
            .orderTag {
              padding: 0.1rem 0.5rem;
              box-sizing: border-box;
              background-color: #86a9fb;
              color: #fff;
              border-radius: 0.1rem;
              font-size: 0.6rem;
              margin-left: 0.25rem;
              transform: scale(0.9);
            }
          }
          .userInfo {
            font-size: 0.6rem;
            color: #999;
            margin-top: 0.15rem;
          }
        }
        .headMoney {
          font-size: 0.6rem;
          color: #86a9fb;
          font-size: 0.8rem;
        }
      }
      .orderForm {
        margin-top: 0.5rem;
        .formItem {
          font-size: 0.6rem;
          margin-bottom: 0.25rem;
          color: #333;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }
  .hasTop {
    margin-top: 1rem;
  }
  .formMain {
    margin-top: 0.5rem;
    color: #666;
    .orderInfo {
      margin-top: 0.75rem;
    }
  }
  .ctrlBtn {
    width: 100%;
    background-color: #fff;
    padding: 0.5rem 4%;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    .homeBtn {
      width: 2.2rem;
      margin-right: 0.75rem;
      height: 2.2rem;
      line-height: 2.2rem;
      border-radius: 0.25rem;
      background-color: #86a9fb;
      color: white;
      text-align: center;
      font-size: 1rem;
    }
    .addBtn {
      flex: 1;
      width: 2rem;
      line-height: 2.2rem;
      letter-spacing: 0.1rem;
      text-align: center;
      font-size: 0.65rem;
      // color:#86a9fb;
      background-color: #86a9fb;
      color: white;
      border-radius: 0.25rem;
    }
  }
  .subBtn {
    width: 92%;
    line-height: 2.2rem;
    background-color: #86a9fb;
    color: #fff;
    position: fixed;
    left: 4%;
    bottom: 0.75rem;
    border-radius: 0.25rem;
    text-align: center;
  }
  .itemForm {
    background-color: #f1f5ff;
    padding: 0.75rem;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 0.75rem;
    border-radius: 0.25rem;
    position: relative;
    .statusImg {
      width: 4rem;
      position: absolute;
      right: 0;
      top: 0;
      img {
        width: 100%;
        transform: rotate(50deg);
      }
    }
    .userCont {
      display: flex;
      align-items: center;
      margin-top: 0.75rem;
      padding-top: 0.75rem;
      border-top: 1px dashed #ccc;
      .userImg {
        width: 1.8rem;
        height: 1.8rem;
        border: 2px solid #86a9fb;
        border-radius: 50%;
        margin-right: 0.5rem;
        img {
          width: 100%;
          border-radius: 50%;
        }
      }
      .userName {
        flex: 1;
        width: 1;
        // color: #333;
        // font-size: 0.6rem;
        font-weight: bold;
      }
      .userBook {
        font-size: 0.6rem;
        border: 1px solid #86a9fb;
        color: #86a9fb;
        border-radius: 0.25rem;
        padding: 0.25rem 0.75rem;
      }
    }
    .formItem {
      display: flex;
      line-height: 1rem;
      margin-bottom: 0.25rem;
      .itemName {
        margin-right: 0.75rem;
        width: 3rem;
        color: #666;
      }
      .itemVal {
        flex: 1;
        width: 1rem;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 超出几行省略 */
      }
    }
    .tipCont {
      font-size: 0.6rem;
      color: #666;
      .blueText {
        color: #86a9fb;
      }
    }
  }
  .filterMain {
    width: 100%;
    padding: 1.25rem 4%;
    box-sizing: border-box;
    text-align: center;
    .filterName {
      font-size: 1rem;
      font-weight: bold;
    }
    .filterVal {
      margin: 0.75rem 0;
      div {
        margin-bottom: 0.25rem;
      }
      .redText {
        color: #86a9fb;
      }
    }
    .maskBtn {
      width: 100%;
      background-color: #86a9fb;
      color: #fff;
      text-align: center;
      padding: 0.55rem 0;
      margin-top: 1.25rem;
      border-radius: 1.5rem;
    }
  }
  .maskCont {
    padding: 0.75rem 4%;
    box-sizing: border-box;
    // background-color: #f7f7f7;
    .maskHead {
      font-size: 0.8rem;
      font-weight: bold;
      padding: 0.5rem 0;
      text-align: center;
    }
    .maskUser {
      box-sizing: border-box;
      .orderItem {
        // border: 1px solid #fff;
        background-color: #fff;
      }
      .activeItem {
        border: 1px solid #86a9fb;
        background-color: #f1f5ff;
      }
    }
    .sureBidderBtn {
      width: 100%;
      line-height: 2.2rem;
      font-size: 0.65rem;
      background-color: #86a9fb;
      color: #fff;
      border-radius: 0.25rem;
      text-align: center;
      margin-top: 0.75rem;
    }
    .disBtn {
      opacity: 0.5;
    }
  }
}
</style>
